<template>
  <div class="hello">
    <h1>美团水果</h1>
    <ul>
      <li v-for="item in list" :key="item._id" >
        水果名称: {{ item.name }} | 价格 {{ item.price }}
      </li>
    </ul>
    <el-pagination
      layout="prev, pager, next"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      @current-change="currentChange"
    >

    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      list: [],
      pagination: {
        offset: 0,
        pageSize: 4,
        total: 0,
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    currentChange(page) {
      this.pagination.offset = (page - 1) * this.pagination.pageSize
      this.getData()
    },
    getData(offset = this.pagination.offset) {
      let url = `/api/list?offset=${offset}&pageSize=${this.pagination.pageSize}`

      axios.get(url)
        .then(res => {
          console.log(res)
          const { pagination, fruits } = res.data.data
          this.list = fruits
          this.pagination.offset = pagination.offset
          this.pagination.total = pagination.total
        })
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
